<template>
  <div>
    <section class="sec-01">
      <div class="back-holder">
        <div class="back-box" @click="goBack">
          <img src="../../assets/img/wx/mode/back.png"/>
        </div>
      </div>
      <div class="sec-01_txt">
        <h1>{{title}}</h1>
        <img :src="img" alt="" class="img">

        <div v-html="content" class="sec-01_txt_content">{{content}}</div>
      </div>
    </section>
  </div>
</template>
<script type="text/ecmascript-6">
  import Core from "core/core"

  export default {
    data() {
      return {
        title: "",
        intro: "",
        content: "",
        img: ""
      }
    },
    mounted: function () {
      let id = this.$route.query.id;
      Core.Api.Article.getArticleDetail(id)
        .then(res => {
          let obj = res.article;
          let title = obj.title;
          this.title = title;
          this.intro = obj.intro;
          this.img = `http://enjoy-oss.oss-cn-hangzhou.aliyuncs.com/img/${obj.img}`;
          this.content = obj.content;
          console.log(obj.content);
        })
    },
    methods: {
      goBack() {
        this.$router.back()
      },
    },
    components: {}
  }
</script>
<style scoped lang="scss">
  .sec-01 {
    position: relative;
    overflow: hidden;
    .back-holder {
      padding: 23px 14px;
      background: black;
      .back-box {
        width: 103px;
        height: 103px;
        padding: 23px 23px;
        img {
          width: 59px;
          height: 59px;
        }
      }

    }
    .sec-01_txt {
      h1{
        margin: 0.67em 10px;
      }
      .img {
        width: 100vw;
        padding: 0 30px;
      }
      .sec-01_txt_content{
        padding: 0 30px;
        line-height: 40px;
      }
    }
  }

</style>
